<script setup>
import {ref} from 'vue';
import Hourglass from "@/components/hourglass.vue";
import Countdown from "@/components/countdown.vue";

const hourglassRef = ref(null);
const countdownRef = ref(null);
const isStarted = ref(false);

// 修改后的 startClock 方法
function startClock() {
  isStarted.value = true;
  if (countdownRef.value) {
    countdownRef.value.startCountdown();
  }
  if (hourglassRef.value) {
    hourglassRef.value.startAnimation('600s');
  }
}

function resetTimer() {
  if (countdownRef.value) {
    countdownRef.value.resetCountdown();
  }
  isStarted.value = false
}

function pauseTimer() {
  if (countdownRef.value) {
    countdownRef.value.pauseCountdown();
  }
}
</script>

<template>
  <div class="container">
    <div class="title">第一轮：新手升级</div>
    <div class="components">
      <hourglass ref="hourglassRef"></hourglass>
      <countdown ref="countdownRef" start-time="10:00:00"></countdown>
    </div>
    <button class="button" v-if="!isStarted" @click="startClock">比赛开始</button>
    <div v-else>
      <button class="button" @click="resetTimer">重新计时</button>
      <button class="button" @click="pauseTimer">暂停</button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import "@/assets/base";
.container {
  .components {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 100px;
  }

  .button {
    background-color: $theme-color;
    color: white;
    padding: 10px 20px;
    font-size: 30px;
    border-radius: 10px;
    margin: 0 20px;
  }
}
</style>